<div class="ngm-theme-dark dark w-[300px] shrink-0 flex flex-col justify-start overflow-auto bg-bluegray-700 text-white p-4 group">
  <div class="w-full flex justify-start items-center my-2" cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
    <mat-icon displayDensity="cosy" class="-ml-2 opacity-0 group-hover:opacity-80">drag_indicator</mat-icon>
    <span class="text-lg pointer-events-none">
      {{ 'Story.Common.Calculations' | translate: { Default: 'Calculations' } }} & {{ 'Story.Common.Parameters' | translate: { Default: 'Parameters' } }}
    </span>
  </div>
    
  <mat-nav-list class="ngm-nav-list flex-1 overflow-auto">
    <mat-list-item *ngFor="let entity of entities()" class="flex rounded-l-xl overflow-hidden mt-2"
      [class.active]="activeLink()?.dataSource === entity.value.dataSource && activeLink()?.entity === entity.key"
      (click)="activeEntity(entity.value.dataSource, entity.key)"
    >
      <ngm-display-behaviour class="flex-1" [option]="entity"></ngm-display-behaviour>
    </mat-list-item>
  </mat-nav-list>

  <div class="flex justify-between">
    <div ngmButtonGroup>
      <button mat-raised-button color="accent" (click)="close()">
        {{ 'Story.Common.Close' | translate: { Default: 'Close' } }}
      </button>
    </div>

    <div>
      <button mat-icon-button [matTooltip]="'PAC.Story.AddCube' | translate: { Default: 'Add Cube' }" matTooltipPosition="above"
        [matMenuTriggerFor]="contextMenu">
        <mat-icon fontSet="material-icons-outlined">playlist_add</mat-icon>
      </button>
    </div>
  </div>
</div>

<div class="flex-1 flex flex-col justify-start items-stretch overflow-hidden">
  <div *ngIf="activeLink" class="flex-1 flex flex-col justify-start items-stretch overflow-x-hidden overflow-y-auto">
    <div class="flex justify-between items-center">
      <label class="text-lg p-2"> {{ 'Story.Common.Parameters' | translate: { Default: 'Parameters' } }} </label>
      <button mat-icon-button class="opacity-60" [matTooltip]="'PAC.Story.CreateParameter' | translate: { Default: 'Create Parameter' }" matTooltipPosition="above"
        [disabled]="!dataSettings()"
        (click)="openCreateParameter()">
        <mat-icon fontSet="material-icons-outlined">add_circle_outline</mat-icon>
      </button>
    </div>
    
    <mat-list class="divide-y ml-4 dark:divide-neutral-800" displayDensity="cosy">
      @for (parameter of parameters(); track parameter.name) {
        <mat-list-item>
          <div class="flex items-center group">
            <ngm-display-behaviour class="flex-1" [option]="{key: parameter.name, caption: parameter.caption}" />

            <button mat-icon-button displayDensity="cosy" class="opacity-0 group-hover:opacity-90"
              (click)="openCreateParameter(parameter.name)">
                <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
            </button>
            <button mat-icon-button displayDensity="cosy" ngmAppearance="danger" class="opacity-0 group-hover:opacity-90"
              (click)="removeParameter(parameter.name)">
                <mat-icon>close</mat-icon>
            </button>
          </div>
        </mat-list-item>
      }
    </mat-list>

    <div class="flex justify-between items-center">
      <label class="text-lg p-2"> {{ 'Story.Common.Calculations' | translate: { Default: 'Calculations' } }} </label>
      <div class="flex items-center gap-1">
        <button mat-icon-button displayDensity="cosy" class="ngm-copilot-command-button ngm-toolbar__action"
          [matTooltip]=" 'Copilot.GenerateWithAI' | translate: {Default: 'Generate with AI'} "
          (click)="aiCreateCalculation()">
          <mat-icon fontSet="material-icons-outlined">auto_fix_high</mat-icon>
        </button>
        <button mat-icon-button class="opacity-60" [matTooltip]="'PAC.Story.CreateCalculationMeasure' | translate: { Default: 'Create Calculation Measure' }" matTooltipPosition="above"
          [disabled]="!dataSettings()"
          (click)="openCreateCalculation()">
          <mat-icon fontSet="material-icons-outlined">add_circle_outline</mat-icon>
        </button>
      </div>
    </div>
    
    <mat-list class="divide-y ml-4 dark:divide-neutral-800" displayDensity="cosy">
      @for (calculation of calculations(); track calculation.name) {
        <mat-list-item>
          <div class="flex items-center group">
            <ngm-display-behaviour class="flex-1" [option]="{key: calculation.name, caption: calculation.caption}" />
            <button mat-icon-button displayDensity="cosy" class="opacity-0 group-hover:opacity-90"
              (click)="openEditCalculation(calculation)">
                <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
            </button>
            <button mat-icon-button displayDensity="cosy" ngmAppearance="danger" class="opacity-0 group-hover:opacity-90"
              (click)="removeCalculation(calculation)">
                <mat-icon>close</mat-icon>
            </button>
          </div>
        </mat-list-item>
      }
    </mat-list>
  </div>
</div>

<router-outlet #o="outlet"></router-outlet>

<mat-menu #contextMenu="matMenu" class="ngm-menu__copilot-context-popper ngm-density__compact">
  <ng-template matMenuContent>
      <ngm-search class="m-2 mb-0" (click)="$event.stopPropagation()" [(ngModel)]="entitySearch" />
    @if (loadingCubes$ | async) {
      <mat-progress-bar mode="query" role="progressbar"
          color="accent"
          class="top-0 left-0 w-full" 
          style="position: absolute; height: 2px;"/>
    } @else if (cubes$ | async) {
      <cdk-virtual-scroll-viewport minBufferPx="200" maxBufferPx="400"
          [style.height.px]="240" [itemSize]="30"
      >
          <button mat-menu-item *cdkVirtualFor="let item of cubes$ | async; trackBy: trackByKey"
            (click)="addCube(item)"
          >
              <ngm-display-behaviour class="flex-1" [option]="item" [displayBehaviour]="DisplayBehaviour.descriptionAndId"
                  [highlight]="entitySearch()" />
          </button>
      </cdk-virtual-scroll-viewport>
    }
  </ng-template>
</mat-menu>